import React, { useState, useEffect } from 'react'
import http from '../../api'
import { useNavigate } from 'react-router-dom'
import { InfiniteScroll, Toast } from 'antd-mobile'
import SelectList from '../publicComponents/SelectList'
import SelectionItem from '../publicComponents/selection/SelectionItem'
import style from './clrcle.module.css'
import { SaveSelect, Select, CircleList } from '../../myTypes'
import Loading from '../publicComponents/Loading'

export default function CircleSelectionList(prop: { curActive: '重庆' | '关注' | '热门' }) {
  let [page, setPage] = useState(1)
  const [type, setType] = useState<'重庆' | '关注' | '热门'>('重庆')
  const [leftSelect, setLeftSelect] = useState<Array<SaveSelect>>([])
  const [rightSelect, setRightSelect] = useState<Array<SaveSelect>>([])
  const [hasMore, setHasMore] = useState(false)
  const { curActive } = prop
  let [userId, setUserId] = useState('')
  const navigate = useNavigate()

  useEffect(() => {
    const id = localStorage.getItem('userId')
    if (id) {
      userId = id
      setUserId(id)
    } else {
      navigate('/login')
    }
    if (curActive === '关注') {
      loadMoreAttention()
    } else {
      loadMore()
    }
    return () => {
      setLeftSelect([])
      setRightSelect([])
    }
  }, [])

  useEffect(() => {
    page = 1
    setType(curActive)
    setLeftSelect([])
    setRightSelect([])
    setHasMore(true)
    setPage(1)
  }, [curActive])

  // 用于处理数据
  function dealData(dataList: Array<Select>) {
    const newData = dataList.map((item) => {
      return {
        title: item.title,
        img: item.headFigure,
        content: item.content,
        id: item.id,
        type: item.type,
        storeId: item.storeId,
        merchantId: item.merchantId,
        address: item.address,
        isVideo: item.containVideo,
        circleUser: {
          head: item.circleUser.head,
          id: item.circleUser.id,
          name: item.circleUser.name,
          storeId: item.circleUser.storeId
        }
      }
    })
    setLeftSelect((preData) => {
      return [...preData, ...newData.slice(0, newData.length / 2)]
    })
    setRightSelect((preData) => {
      return [...preData, ...newData.slice(newData.length / 2)]
    })
  }

  async function loadMoreAttention() {
    Toast.show({
      content: '加载中...',
      maskClickable: false,
      duration: 0,
      icon: <Loading />
    })
    const data = await http('get', '/mty/circle/getRandom', {
      accountId: userId,
      pageNum: page,
      pageSize: 10
    })
    if (data) {
      const dataList = data.data as Array<Select>
      dealData(dataList)

      setPage((prePage) => prePage + 1)
      setHasMore(() => dataList.length > 0)
    }
    Toast.clear()
  }
  async function loadMore() {
    Toast.show({
      content: '加载中...',
      maskClickable: false,
      duration: 0,
      icon: <Loading />
    })
    const data = await http('get', '/mty/my/getAttentionCircles', {
      accountId: userId,
      pageNum: page,
      pageSize: 10,
      userId: userId
    })
    if (data) {
      const dataList = data.data as CircleList
      dealData(dataList.list)
      setPage((prePage) => prePage + 1)
      setHasMore(() => dataList.list.length > 0)
    }
    Toast.clear()
  }

  return (
    <div>
      {/* 猜你喜欢和热门去处显示 */}
      {type !== '关注' && (
        <div className={style['select-list']}>
          <div className={style['select-items']}>
            {leftSelect.map((s, i) => {
              return <SelectionItem s={s} key={i} />
            })}
          </div>
          <div className={style['select-items']}>
            {rightSelect.map((s, i) => {
              return <SelectionItem s={s} key={i} />
            })}
          </div>
        </div>
      )}

      {/* 我的关注展示 */}
      {type === '关注' && (
        <div className={style['select-collection']}>
          {/* 没有数据时展示 */}
          {leftSelect.length === 0 && <div className={style.empty}>暂无相关的圈子</div>}

          {/* 有数据时展示 */}
          <SelectList leftSelect={leftSelect} rightSelect={rightSelect} />
        </div>
      )}
      {curActive === '关注' ? (
        <InfiniteScroll threshold={0} loadMore={loadMore} hasMore={hasMore}>
          {!hasMore && <span>----我也是有底线的----</span>}
        </InfiniteScroll>
      ) : (
        <InfiniteScroll threshold={0} loadMore={loadMoreAttention} hasMore={hasMore}>
          {!hasMore && <span>----我也是有底线的----</span>}
        </InfiniteScroll>
      )}
    </div>
  )
}
